<template>
	<view class="content">


		<view style="width: 100%;height: 990rpx;">
			<!-- banner -->
			<u-swiper class="swiper" img-mode="scaleToFill" height="780" bg-color="#00000000" border-radius="0"
				mode="rect" @click="onSwiper" :list="listswiper" name="imageUrl"></u-swiper>

			<!-- 线性渐变阴影 -->
			<view class="banner_shadow"></view>

			<!-- 今日推荐 -->
			<view class="remendianying-view">
				<text class="today-title">今日推荐</text>
				<scroll-view class="remendianying-scroll" scroll-x="true">
					<view class="remendianying-item" :class="{remendianying_item2:index==listRemen.length-1}"
						v-for="(item,index) in listRemen" :key="index" @click="onRemenClick(index)">
						<u-image width="100%" height="295rpx" :src="$mConfig.formatFileUrl(item.cover)"
							mode="scaleToFill" border-radius="10">
						</u-image>
						<text class="itemtitle">{{item.movieName}}</text>
						<view style="margin: 0 auto;">
							<u-rate :current="item.score/2" active-color="#6495ED" size="16" gutter="3"
								:disabled="true">
							</u-rate>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>


		<!-- 热门预告片 -->
		<view class="remenyugaopian-view">
			<view class="remenyugaopian-title">
				<text class="title">热门预告片</text>
			</view>
			<view class="remenyugaopian-content">

				<view class="remenyugaopian-item-content" v-for="(item,index) in listYugao" :key="index">

					<video :id="item._id" :data-playintIndex="item._id" @play="mplaying" class="remenyugaopian-item"
						:src="item.movieUrl" @error="videoErrorCallback" :poster="$mConfig.formatFileUrl(item.cover)"
						object-fit="fill" controls></video>

					<view style="height:70rpx; padding-left: 20rpx;padding-top: 12rpx;">{{item.movieName}}</view>
				</view>



			</view>
		</view>

		<!-- 猜你喜欢 -->
		<view class="cainixihuan-view">
			<view class="cainixihuan-title">
				<text class="title">猜你喜欢</text>
			</view>
			<view class="cainixihuan-item" v-for="(item,index) in listCai" :key="index" @click="onCaiClick(index)">
				<u-image class="left-img" width="200rpx" height="270rpx" border-radius="8"
					:src="$mConfig.formatFileUrl(item.cover)" mode="scaleToFill">
				</u-image>

				<view class="cainixihuan-item-info">
					<text class="title">{{item.movieName}}</text>
					<u-rate class="rate" :current="item.score/2" active-color="#6495ED" size="26" gutter="6"
						:disabled="true">
					</u-rate>
					<text class="subtitle">{{item.info}}</text>
					<text class="subtitle">时长：{{item.totalTime}}</text>
					<text class="subtitle">上映时间：{{item.releaseDate}}</text>
				</view>

				<view class="item_position">
					<image class="icon-min" src="../../static/img/ic_dianzan.png" mode="scaleToFill"></image>
					<text class="text-min">{{item.counts}}</text>
					<image class="icon-min" src="../../static/img/ic_shoucang_n.png" mode="scaleToFill"></image>
					<text class="text-min">98</text>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				listswiper: [],
				listRemen: [],
				listYugao: [],
				listCai: [],
				vedioContext: ""
			}
		},
		onLoad() {
			this.refreshData();
		},
		onPullDownRefresh() {
			this.refreshData();
		},
		onHide() {
			if (this.vedioContext) {
				this.vedioContext.pause();
			}
		},
		methods: {
			//播放一个视频时，需要暂停其他视频
			mplaying(e) {
				let vid = "";
				if (e) {
					vid = e.currentTarget.dataset.playintindex;
					this.vedioContext = uni.createVideoContext(vid);
				}
				for (let i = 0; i < this.listYugao.length; i++) {
					let tempid = this.listYugao[i]._id;
					if (vid != tempid) {
						uni.createVideoContext(tempid).pause();
					}
				}
			},
			onSwiper(index) {
				uni.navigateTo({
					url: "../movieinfo/movieinfo?movieId=" + this.listswiper[index].movieId
				})
			},
			onRemenClick(index) {
				uni.navigateTo({
					url: "../movieinfo/movieinfo?movieId=" + this.listRemen[index].movieId
				})
			},
			onCaiClick(index) {
				uni.navigateTo({
					url: "../movieinfo/movieinfo?movieId=" + this.listCai[index].movieId
				})
			},
			videoErrorCallback: function(e) {
				// uni.showModal({
				// 	content: e.target.errMsg,
				// 	showCancel: false
				// })
			},
			refreshData() {
				//获取轮播
				this.$u.get('/client/banners/list', {}).then(res => {
					// console.log(res);
					this.listswiper = res.list;
					for (let item of this.listswiper) {
						item.imageUrl = this.$mConfig.formatFileUrl(item.imageUrl);
					}
				});

				//获取热门电影
				this.$u.get('/client/movies/hots', {}).then(res => {
					// console.log(res);
					this.listRemen = res.hots;
				});

				//获取热门预告片
				this.$u.get('/client/trailers/list', {}).then(res => {
					// console.log(res);
					this.listYugao = res.list;
				});

				//获取猜你喜欢
				this.$u.get('/client/movies/list', {}).then(res => {
					// console.log(res);
					this.listCai = res.list;
				});

				uni.stopPullDownRefresh();
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color-grey;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	//banner
	.swiper {
		width: 100%;
		position: absolute;
	}

	.banner_shadow {
		position: absolute;
		height: 164rpx;
		width: 100%;
		top: 620rpx;
		background: linear-gradient(0deg, #f7f7f7, #00000000)
	}


	//今日推荐
	.remendianying-view {
		width: 100%;
		position: absolute;
		top: 535rpx;
		flex-direction: column;
		padding: 15rpx 0rpx 15rpx 0rpx;

		.today-title {
			font-size: 17px;
			line-height: 55rpx;
			color: white;
			margin-left: 20rpx;
		}

		.remendianying-scroll {
			margin-top: 15rpx;
			width: 100%;
			white-space: nowrap;

			.remendianying-item {
				display: inline-flex;
				width: 220rpx;
				margin-left: 20rpx;
				flex-direction: column;

				.itemtitle {
					margin-top: 10rpx;
					font-size: 13px;
					color: $uni-text-color;
					white-space: nowrap;
					overflow: hidden;
					text-align: center;
					text-overflow: ellipsis;
				}
			}

			.remendianying_item2 {
				margin-right: 20rpx;
			}


		}

	}

	//热门预告片
	.remenyugaopian-view {
		margin-top: 30rpx;
		display: flex;
		width: 100%;
		flex-direction: column;
		padding: 15rpx 0rpx 15rpx 0rpx;

		.remenyugaopian-title {
			flex-direction: row;
			margin-left: 10rpx;
			align-items: center;
			display: flex;
			height: 55rpx;

			.title {
				margin-left: 15rpx;
				font-size: 17px;
				color: $uni-text-color;
			}

		}

		.remenyugaopian-content {
			width: 100%;
			display: inline-flex;
			flex-wrap: wrap;

			.remenyugaopian-item-content {
				margin: 0 25rpx;
				background-color: white;
				border-radius: 6rpx;
				margin-top: 25rpx;
				overflow: hidden;


				.remenyugaopian-item {
					width: 700rpx;
					height: 350rpx;
				}
			}
		}

	}

	//猜你喜欢
	.cainixihuan-view {
		margin-top: 20rpx;
		display: flex;
		width: 100%;
		flex-direction: column;
		padding: 15rpx 0rpx 0rpx 0rpx;


		.cainixihuan-title {
			flex-direction: row;
			margin-left: 10rpx;
			align-items: center;
			display: flex;
			height: 55rpx;

			.title {
				margin-left: 15rpx;
				font-size: 17px;
				color: $uni-text-color;
			}

		}


		.cainixihuan-item {
			display: flex;
			margin-top: 18rpx;
			padding-bottom: 18rpx;
			width: 98%;
			flex-direction: row;
			margin-right: 22rpx;
			margin-left: 22rpx;
			border-bottom: $uni-bg-color-grey solid 1px;


			.left-img {
				width: 200rpx;
				height: 270rpx;
			}

			.cainixihuan-item-info {
				display: flex;
				flex: 1;
				margin-left: 20rpx;
				margin-right: 20rpx;
				flex-direction: column;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				.rate {
					margin-bottom: 15rpx;
					margin-top: 5rpx;
				}

				.title {
					font-size: 17px;
					color: $uni-text-color;
					margin-bottom: 5rpx;
					font-weight: bold;
					margin-right: 220rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.subtitle {
					margin-top: 10rpx;
					font-size: 15px;
					color: #666666;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.item_position {
				position: absolute;
				right: 0;
				margin-top: 7rpx;
				margin-right: 25rpx;
				display: flex;
				flex-direction: row;

				.icon-min {
					margin-left: 20rpx;
					width: 32rpx;
					height: 32rpx;
				}

				.text-min {
					margin-left: 10rpx;
					font-size: 13px;
					color: $uni-text-color-grey;
				}

			}
		}
	}
</style>
